<template>
  <div>
    <!-- 播放器 -->
    <section class="main js_main">
      <div class="main__bd">
        <div class="song_info">
          <div class="song_info__hd">
            <h1 class="song_name">
              <span class="song_name__text js_song_name">{{
                song.songtitle
              }}</span>
            </h1>
            <h2 class="singer_name js_singer_name js_singer">
              {{ song.singername }}
            </h2>
          </div>
          <div class="song_info__bd js_toggle_cover js_tj">
            <div
              class="album_cover fade_in js_cover"
              v-show="!showLyric"
              @click="showLyric = !showLyric"
            >
              <img
                class="album_cover__img js_album_cover"
                :src="song.pic"
                alt=""
              />
            </div>
            <!-- 歌词    -->
            <div
              class="lyric js_lrc fade_in"
              v-show="showLyric"
              @click="showLyric = !showLyric"
            >
              <div class="lyric__bd js_lrc_bd" style="overflow: hidden">
                <div
                  class="lyric__scroll js_lrc_list js_tj lyric_Top"
                  :style="'top:' + topNum"
                >
                  <p
                    v-for="(item, index) in lyric"
                    :key="index"
                    :class="
                      playNowTime >= item.time &&
                      playNowTime < lyric[index + 1].time
                        ? 'lyric__para current'
                        : 'lyric__para'
                    "
                    :ref="
                      playNowTime >= item.time &&
                      playNowTime < lyric[index + 1].time
                        ? 'choose'
                        : ''
                    "
                  >
                    {{ item.word }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 播放按钮 -->
        <div class="opt">
          <!-- 上一首 -->
          <a class="opt__item js_mv js_tj" @click="back">
            <i class="el-icon-caret-left" style="font-size: 0.38rem"></i>
          </a>
          <a class="opt__item js_play js_tj">
            <van-icon
              name="play-circle-o"
              @click="play"
              v-show="playerState != 1"
              size=".38rem"
            />
            <van-icon
              name="pause-circle-o"
              @click="pause"
              v-show="playerState == 1"
              size=".38rem"
            />
          </a>
          <!-- 下一首 -->
          <a class="opt__item js_like js_openmusic js_tj" @click="next">
            <i class="el-icon-caret-right" style="font-size: 0.38rem"></i>
          </a>
        </div>
        <!-- 下载歌曲 -->
        <a class="btn_download js_download js_tj" @click="down()">下载歌曲</a>
      </div>
      <!-- 虚化背景 -->
      <div class="bg">
        <img class="bg__img js_album_cover" :src="song.pic" alt="" />
      </div>
    </section>
    <!-- 热评 -->
    <section class="comment js_cmt" style>
      <h2 class="mod_tit js_cmt_title">精彩评论</h2>
      <div class="comment js_cmt_wrap">
        <div class="comment_box comment_skin--black">
          <div class="mod_comment">
            <ul class="mod_comment_list">
              <!-- 评论列表 -->
              <li
                class="comment_list__item"
                v-for="item in hotComments.commentlist"
                :key="item.commentid"
              >
                <!-- 头像 -->
                <div class="comment_list__avatar">
                  <img
                    class="comment_list__avatar_img"
                    :src="item.avatarurl"
                    :alt="item.nick"
                  />
                </div>
                <!-- 评论 -->
                <div class="comment_list__body">
                  <header class="comment_list__heading">
                    <h3 class="comment_list__tit">
                      <span class="comment_list__name c_txt1 c_txt2">{{
                        item.nick
                      }}</span>
                      <img
                        :src="item.vipicon"
                        alt=""
                        class="comment_list__grade"
                      />
                    </h3>
                    <time class="comment_list__time c_txt1 c_txt2">{{
                      formatTime(item.time, "M-D h:m")
                    }}</time>
                  </header>

                  <div>
                    <div class="comment_list__txt">
                      <p class="reply_comment c_txt1">
                        <span class="c_txt1">{{
                          item.rootcommentcontent
                        }}</span>
                      </p>
                      <div class="comment_list__cont">
                        <p class="comment_list__para"></p>
                      </div>
                      <div class="comment_list__repeat">
                        <!-- 评论追评 API搜索不到 -->
                        <p class="comment_list__repeat__para c_txt1"></p>
                      </div>
                      <div class="comment_list__txt__bg c_txt1"></div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- 最新评论 -->
    <section class="comment js_cmt" style>
      <h2 class="mod_tit js_cmt_title">最新评论</h2>
      <div class="comment js_cmt_wrap">
        <div class="comment_box comment_skin--black">
          <div class="mod_comment">
            <ul class="mod_comment_list">
              <!-- 评论列表 -->
              <li
                class="comment_list__item"
                v-for="item in comments.commentlist"
                :key="item.commentid"
              >
                <!-- 头像 -->
                <div class="comment_list__avatar">
                  <img
                    class="comment_list__avatar_img"
                    :src="item.avatarurl"
                    :alt="item.nick"
                  />
                </div>
                <!-- 评论 -->
                <div class="comment_list__body">
                  <header class="comment_list__heading">
                    <h3 class="comment_list__tit">
                      <span class="comment_list__name c_txt1 c_txt2">{{
                        item.nick
                      }}</span>
                      <img
                        :src="item.vipicon"
                        alt=""
                        class="comment_list__grade"
                      />
                    </h3>
                    <time class="comment_list__time c_txt1 c_txt2">{{
                      formatTime(item.time, "M-D h:m")
                    }}</time>
                  </header>

                  <div>
                    <div class="comment_list__txt">
                      <p class="reply_comment c_txt1">
                        <span class="c_txt1">{{
                          item.rootcommentcontent
                        }}</span>
                      </p>
                      <div class="comment_list__cont">
                        <p class="comment_list__para"></p>
                      </div>
                      <div class="comment_list__repeat">
                        <!-- 评论追评 API搜索不到 -->
                        <p class="comment_list__repeat__para c_txt1"></p>
                      </div>
                      <div class="comment_list__txt__bg c_txt1"></div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import {
  getSongDetail,
  getSongComments,
  getMedia,
  getLyric,
} from "@/api/songs.js";
import { formatTime, isEmpty } from "@/utils/base.js";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      song: {},
      hotComments: [], //热评
      comments: {}, //总评论
      showLyric: false,
      lyric: "",
      topNum: 0,
    };
  },
  computed: {
    ...mapState({
      isShowPlayer: "isShowPlayer",
      playerState: "playerState",
      songs: "songs",
      songsHistory: "songsHistory",
      playNowTime: "playNowTime",
    }),
  },
  methods: {
    ...mapMutations([
      "changeShowPlayer",
      "changePlayerState",
      "addSongs",
      "deleteSongs",
      "deleteSongsHistory",
    ]),
    formatTime(number, format) {
      return formatTime(number * 1000, format);
    },
    play() {
      if (this.songs[0] == this.song) {
        this.changePlayerState({ playerState: 1 });
      } else {
        this.addSongs({ songs: [this.song] });
      }
    },
    pause() {
      this.changePlayerState({ playerState: 2 });
    },
    down() {
      window.location.href = "/reptile/DownMusicFile?mid=" + this.song.songmid;
    },
    back() {
      //上一首todo
      if (this.songsHistory.length < 1) {
        alert("已经是第一首歌曲了");
        return;
      }
      this.deleteSongsHistory();
      this.$router.push({ path: "/SongDetail?id=" + this.songs[0].songmid });
    },
    next() {
      if (this.songs.length == 0||this.songs.length ==1) {
        alert("已经是最后一首歌曲了");
        return;
      }
      //下一首
      this.deleteSongs();
      this.$router.push({ path: "/SongDetail?id=" + this.songs[0].songmid });
    },
  },

  async created() {
    let mid = this.$route.query.id;
    //console.log("传递过来的参数", mid);
    let res = await getSongDetail(mid);
    this.song = res.data[0];
    res = await getSongComments(this.song.songid);
    const { comment, hot_comment } = res.data;
    this.hotComments = hot_comment;
    this.comments = comment;
    //歌词
    res = await getLyric(mid);
    let lyric = res.data.data.lyric;
    //分割歌词
    lyric = lyric.split("[");
    var obj = lyric
      .map((a) => {
        let arr1 = a.split("]");
        if (arr1.length == 2) {
          let time = arr1[0];
          let minute = time.split(":")[0] * 60;
          let second = time.split(":")[1].split(".")[0] * 1;
          if (minute + second >= 0 && arr1[1] != "")
            return { time: minute + second, word: arr1[1] };
        }
      })
      .filter((a) => {
        return a != null && !isEmpty(a.word) && a.word != "\n";
      });
    console.log("分割的歌词", obj);
    this.lyric = obj;
  },
  watch: {
    playNowTime: {
      handler(newValue, oldValue) {
        console.log("当前选中位置", this.$refs.choose[0].offsetTop);
        let offsetTop = this.$refs.choose[0].offsetTop;
        this.topNum = -(offsetTop - 30) + "px";
      },
    },
  },
};
</script>

<style>
@import url("https://y.gtimg.cn/mediastyle/mobile/app/share/play_v3_bba05b88.css?max_age=2592000");
@import url("https://y.qq.com/mediastyle/mod/mobile/mod_comment.css?max_age=2592000&ver=20200402");
.lyric_Top {
  position: relative;
  left: 0;
  top: 0;
}
</style>